<template>
  <div class="home">
<!-- 通过传递属性large，将按钮变大 -->
    <div class="btn-container">
      <!-- UIButton组件中间的文字会以动态的形式传递到子组件的插槽中 -->
      <ButtonUI :xsmall="xsmall" :small="small" :large="large" :xlarge="xlarge"
                :tile="tile" :rounded="rounded" :cicle="cicle"
                :disable="disable"  color="red"
                @click="btnClick">2</ButtonUI>
    </div>
    <ButtonUI class="mR15" @click="resize('xsmall')">xsmall</ButtonUI>
    <ButtonUI class="mR15" @click="resize('small')">small</ButtonUI>
    <ButtonUI class="mR15" @click="resize('large')">large</ButtonUI>
    <ButtonUI class="mR15" @click="resize('xlarge')">xlarge</ButtonUI>
    <br><br><br>
    <ButtonUI class="mR15" @click="resizeRound('tile')">tile</ButtonUI>
    <ButtonUI class="mR15" @click="resizeRound('rounded')">rounded</ButtonUI>
    <ButtonUI class="mR15" @click="resizeRound('cicle')">cicle</ButtonUI>
    <br><br><br>
    <ButtonUI class="mR15" @click="disable = !disable">禁用</ButtonUI>
  </div>
</template>

<script lang="ts">
    // 以下都是类样式组件
import { Component, Vue } from 'vue-property-decorator';
import ButtonUI from "@/components/ButtonUI.vue";
@Component({
  components: {
      ButtonUI
  },
})
export default class Home extends Vue {
    /*
   * ts中的事件要写在class导出类中
   * 使用方法或者成员变量，一般都会加上访问权限修饰符，
   * onClick方法为内部处理按钮的点击事件，并不需要外部调用，
   * 所以用private私有方法
   * 此时直接给子组件添加点击事件，不会生效，
   * 这是因为我们虽然在UIButton中监听了按钮的点击事件，
   * 但是我们在按钮的组件内部，并没有对button进行事件监听，
   * <button @click>,所以在UIButton的外部肯定也接收不到点击事件。
   * 如果要让外部能接收到点击事件，有两种方法，
   * 给<button v-on="$listeners">绑定v-on事件，
   * <button v-on="$listeners">button</button>
   * 表示当前这个类内部不对这个button进行事件监听，
   * 在哪个地方使用它，哪个地方都可以监听。
   * */
    // 接收参数，事件类型是鼠标事件
  private xsmall: boolean = false
  private small: boolean = false
  private large: boolean = true
  private xlarge: boolean = false
  private tile: boolean = false
  private rounded: boolean = false
  private cicle: boolean = false
  private disable: boolean = false

    // 接收子组件传递过来的参数的方式 private btnClick(event: MouseEvent) ｛ console.log(event); ｝
  private resize(type: string) {
      switch (type) {
        case 'xsmall':
            console.log('xsmall');
            this.small = this.large = this.xlarge = false
            this.xsmall = true
            break;
          case 'small':
              console.log('small');
              this.xsmall = this.large = this.small = false
              this.small = true
              break;
          case 'large':
              console.log(333);
              this.xsmall = this.small = this.xlarge = false
              this.large = true
              break;
          case 'xlarge':
              console.log(444);
              this.xsmall = this.small = this.large = false
              this.xlarge = true
              break;

      }
  }

  private resizeRound(type: string) {
      switch (type) {
          case 'tile':
              this.rounded = this.cicle = false
              this.tile = true
              break;
          case 'rounded':
              this.tile = this.cicle = false
              this.rounded = true
              break;
          case 'cicle':
              this.tile = this.rounded = false
              this.cicle = true
              break;
        }
    }

  private btnClick(event: MouseEvent) {
      console.log(event);
  }
}
</script>

<style scoped lang="stylus">
.home
  padding-left 30px
.btn-container
  margin-bottom 25px
  height 50px
.mR15
  margin-right 15px
</style>
